<template>
  <div class="layout">
    <Layout>
      <Header class="header-con">
        <div class="header-bar">
          <div class="logo-con">
            <img :src="maxLogo" alt="" />
          </div>
          <div class="custom-content-con">
            <user
              :message-unread-count="unreadCount"
              :user-avatar="userAvatar"
            />
            <language
              v-if="$config.useI18n"
              class="language"
              @on-lang-change="setLocal"
              style="margin-right: 10px;"
              :lang="local"
            />
            <!-- <error-store
              v-if="
                $config.plugin['error-store'] &&
                  $config.plugin['error-store'].showInHeader
              "
              :has-read="hasReadErrorPage"
              :count="errorCount"
            ></error-store> -->
            <fullscreen v-model="isFullscreen" style="margin-right: 10px;" />
            <div class="backmanager">
              <Button
                @click="gotoBack"
                size="small"
                icon="ios-people"
                type="primary"
                >{{$t('9_SQ4QT9n3IxD0q0JBmGO')}}</Button
              >
              <div class="divide"></div>
            </div>
            <div class="backmanager">
              <Button
                @click="gotoBigScreen"
                size="small"
                icon="ios-desktop"
                type="primary"
                >{{$t('jT4to1ARXoD4w1KrMFQdD')}}</Button
              >
              <div class="divide"></div>
            </div>
          </div>
        </div>
      </Header>
      <Content class="content">
        <Layout class="main-layout-content">
          <div class="tag-nav-wrapper">
            <tags-nav
              :value="$route"
              @input="handleClick"
              :list="tagNavFrontList"
              @on-close="handleCloseTag"
            />
          </div>
          <Content class="content-wrapper">
            <router-view />
          </Content>
        </Layout>
      </Content>
    </Layout>
  </div>
</template>

<script>
import User from '@/components/main/components/user'
import ABackTop from '@/components/main/components/a-back-top'
import Fullscreen from '@/components/main/components/fullscreen'
import Language from '@/components/main/components/language'
import ErrorStore from '@/components/main/components/error-store'
import { mapMutations } from 'vuex'
import minLogo from '@/assets/images/logo-min.jpg'
import maxLogo from '@/assets/images/logo.jpg'
import TagsNav from '@/components/main/components/tags-nav'
import { routeEqual } from '@/libs/util'

export default {
  name: 'StartPage',
  components: {
    User,
    ABackTop,
    Fullscreen,
    Language,
    ErrorStore,
    TagsNav
  },
  data () {
    return {
      activeName: 'operator',
      maxLogo,
      minLogo,
      isFullscreen: false
    }
  },
  computed: {
    tagNavFrontList () {
      return this.$store.state.app.tagNavFrontList
    },
    errorCount () {
      return this.$store.getters.errorCount
    },
    userAvatar () {
      return this.$store.state.user.avatarImgPath
    },
    local () {
      return this.$store.state.app.local
    },
    hasReadErrorPage () {
      return this.$store.state.app.hasReadErrorPage
    },
    unreadCount () {
      return this.$store.state.user.unreadCount
    },
    isAdmin () {
      return this.$store.getters.isAdmin
    },
    isAgent () {
      return this.$store.getters.isAgent
    },
    isStation () {
      return this.$store.getters.isStation
    }
  },
  watch: {
    $route () {
      this.adapterChange()
    }
  },
  async created () {
    this.$store.commit('setEnvi', 'front')
    this.adapterChange()
  },
  mounted () {
    // this.setInfos()
  },
  methods: {
    ...mapMutations(['addFrontTag', 'closeFrontTag', 'setFrontTagNavList']),
    async adapterChange () {
      const { params, name, query, meta } = this.$route
      if (!_.isNil(params.id)) {
        _.assign(meta, {
          useTitle: this.$t('agent_station_manage')
        })
      } else {
        _.assign(meta, {
          useTitle: this.$t('front_overview')
        })
      }
      this.addFrontTag({
        route: { name, params, query, meta },
        type: 'push'
      })
    },
    setLocal (name) {
      this.$store.commit('setLocal', name)
    },
    gotoBack () {
      const menuList = this.$store.getters.menuList
      const name = menuList[0]?.children?.length ? menuList[0].children[0].name : menuList.name
      console.log('===========gotoBack name: ', name)
      if (name) {
        this.$router.push({ name })
      } else {
        this.$Message.warning(this.$t('xognXhuHjqD-of-zr8dv4'))
      }
    },
    gotoBigScreen () {
      if (this.isStation) {
        // this.$router.push({ name: 'screen', params: { id: this.$store.state.user.stationId } })
        // window.open(location.protocol + '//' + location.host + location.pathname + '/screen/station/' + this.$store.state.user.stationId)
        const resolved = this.$router.resolve({
          name: 'screen',
          params: { id: this.$store.state.user.stationId }
        })
        // console.log('============= resolved', resolved)
        // window.alert(resolved.href)
        window.open(resolved.href)
      }
    },
    handleClick (item) {
      this.turnToPage(item)
    },
    turnToPage (route) {
      let { name, params, query } = {}
      if (typeof route === 'string') name = route
      else {
        name = route.name
        params = route.params
        query = route.query
      }
      if (name.indexOf('isTurnByHref_') > -1) {
        window.open(name.split('_')[1])
        return
      }
      this.$router.push({
        name,
        params,
        query
      })
    },
    handleCloseTag (res, type, route) {
      if (type !== 'others') {
        if (type === 'all') {
          this.turnToPage(this.$config.frontHomeName)
        } else {
          if (routeEqual(this.$route, route)) {
            this.tagNavFrontList.length > 1 &&
            this.closeFrontTag(route)
          }
        }
      }
      this.tagNavFrontList.length > 1 && this.setFrontTagNavList(res)
    }
  }
}
</script>

<style lang="stylus" scoped>
.content
  padding 20px
  height calc(100vh - 64px)
  overflow hidden
  .content-main
    max-height 100%
    & >>> .ivu-card-body
      max-height calc(100% - 51px)
      .btn-area
        height 24px
      .main-wrap
        max-height calc(100vh - 211px)
        overflow-y auto
        overflow-x hidden

.header-con
  padding 0
.custom-content-con >>> .ivu-btn-text
  color #ccc
  &:hover
    background-color #515a6e
    color #fff
.language >>> .ivu-dropdown-rel a
  color #ccc
  &:hover
    color #fff
.full-screen-btn-con >>> .ivu-tooltip-rel i
  color #ccc
  &:hover
    color #fff
.logo-con
  width 250px
  height 64px
  padding 10px
  display inline-block
  img
    height 44px
    width auto
    display block
    margin 0 auto
.backmanager
  padding-right 12px
  .divide
    display inline-block
    width 1px
    height 30px
    margin-left 12px
    border-right 2px solid #888
    position relative
    top 12px
</style>
